// 用自调用函数关闭全局作用域，防止全局变量污染
(function(){
  // 创建一个食物的构造函数,传入一个对象参数
  function Food(option) {
    // 判断传参是否为对象
    // 食物的属性有，width，height，位置x，y, 背景颜色backgroundColor
    this.option = option instanceof Object ? option : {};
    this.width = this.option.width || 20;
    this.height = this.option.height || 20;
    this.x = this.option.x || 0;
    this.y = this.option.y || 0;
    this.backgroundColor = this.option.backgroundColor || "green";
    // 记录食物的数组
    this.eles = [];
  }
  // 定位
  var ps = "absolute";
  // 在Food的原型属性添加渲染食物的方法
  Food.prototype.render = function (map) {
    // var el = document.createElement("div");
    // 需要记录生成的元素，方便删除，因此用this.el来存放生成的节点
    this.el = document.createElement("div");
    // 每次设置样式，都随机获得x和y的值
    this.x = Tool.getRandom(0, (map.clientWidth / this.width - 1)) * this.width;
    this.y = Tool.getRandom(0, (map.clientHeight / this.height - 1)) * this.height;
    
    this.el.style.width = this.width + "px";
    this.el.style.height = this.height + "px";
    this.el.style.left = this.x + "px";
    this.el.style.top = this.y + "px";
    this.el.style.backgroundColor = this.backgroundColor;
    this.el.style.position = ps;
    // 把生成的食物添加进数组中
    this.eles.push(this.el);
    // 把生成的食物节点渲染在页面上
    map.appendChild(this.el);
  }
  // 在Food原型属性添加删除食物的方法
  Food.prototype.delFood = function (map) {
    // 1.删除数组中的数据
    this.eles.splice(0, 1);
    // 2.删除页面上的元素
    map.removeChild(this.el);
  }
  // 再用window对象将构造函数暴露出来，让外部可以调用Food对象
  window.Food = Food;
})();

// test
// var map = document.getElementById("map");
// var food = new Food();
// food.render(map);
// food.delFood(map);